import React, { useState } from 'react'
import '../../css/public.less'
import './css/OrderExchangeCss/OrderExchangeDispose.less'
import { Input, DatePicker, Space, Button, Table, Modal, DatePickerProps } from 'antd';

const OrderExchangeDispose = () => {


    const [input, setInput] = useState<string>('')  //获取修改备注的值

    //获取修改后备注
    const handleChange = (e: any) => {
        let input = e.target.value
        setInput(input);
        console.log('order', input);
    }
    //点击确认修改备注
    const filterInput = () => {
        console.log('获取修改后的备注',input);
        
    }


    return (
        <div className='OrderExchangeDispose'>
            {/* 头部 */}
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>退款申请详情</p>
                </div>
            </div>

            {/* 内容区 */}
            <div className='page-context'>
                {/* 查询部分 */}
                <div className='banner-search'>
                    <div className='banner-query'>
                        <p>退款详情（已处理）</p>
                    </div>
                </div>
                {/* 数据表格部分 */}
                <div className='data-list'>
                    <div className='banner-foter'>
                        <div>
                            <ul className='banner-left'>
                                <li>订单编号</li>
                                <li>申请状态</li>
                                <li>申请时间</li>
                                <li>用户账号</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>27823424023</p></li>
                                <li><p>待处理</p></li>
                                <li><p>2018-01-09 14:30:29</p></li>
                                <li><p>189 3049 3829</p></li>
                            </ul>
                        </div>
                        <div className='banner-context'>
                            <ul className='banner-left'>
                                <li>订单金额</li>
                                <li>确认金额</li>
                                <li>退款方式</li>
                                <li>售后类型</li>
                                <li>申请原因</li>
                                <li>处理意见</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>999.00</p></li>
                                <li><p>999.00</p></li>
                                <li><p>按原支付通道退回</p></li>
                                <li><p>退货</p></li>
                                <li><p>商品质量有问题</p></li>
                                <li><p>同意退货</p></li>
                            </ul>
                        </div>
                        <div className='banner-thear'>
                            <ul className='banner-left'>
                                <li>处理人</li>
                                <li>处理备注</li>
                                <li>处理时间</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>admin</p></li>
                                <li><Input defaultValue="同意退款，&nbsp;原因属实" onChange={handleChange} className='banner-input' /></li>
                                <li><p>2019-01-09 15:40:20</p></li>
                            </ul>
                        </div>
                    </div>
                    <div className='banner-list-button'>
                        <button className='button-trun' onClick={filterInput}>修改处理备注</button>
                    </div>
                </div>
            </div>
        </div>
    )
}


export default OrderExchangeDispose
